<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-migrate-1.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.container{
				width: 400px;
				height: 300px;
				border: 3px solid yellow;
				position: relative;	
				/*overflow: hidden;*/
			}
			.content>div{
				position: absolute;
				width:50px;
				height:50px;
				border:4px solid black;
				right: 0px;
				bottom: 0px;
			}
			.content button{
				padding: 0px;
				margin: 0px;
				width: 50px;
				height: 50px;
				background: url(img/小手.jpg);
				background-size: 100% auto;
			}
			.content img{
				width: 40px;
				height: 40px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="content">
				<div>
					<button></button>
					<img width="100px" height="100px" />
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$(document).ready(function() {
			$('button').bind('click',function(event){
				$('.content div').animate({'width':'80px','height':'80px'},500);
//				event.stopPropagation();
				return false;
//				return false;
			});
			$('.container').bind('click',function(event){
				$('.content div').animate({'width':'50px','height':'50px'},500);
				return false;
			});
		});
	</script>
</html>
